<template>
  <div class="menu-wrapper">
    <office-dialog ref="officeDialog" @confirm="dialogConfirm" />
    <el-form ref="shopForm" :model="form" :rules="rules" label-width="100px">
      <div style="width: 100%;display: flex;align-items: flex-end;border-bottom: 1px #eee solid;margin-bottom: 20px">
        <span style="font-size: 18px;color:#409EFF;margin: 10px 0;">添加信息</span>
      </div>
      <el-row>
        <el-col :span="6">
           <el-form-item label="门店名称" prop="name" >
              <el-input v-model="form.name" />
           </el-form-item>
        </el-col>

      </el-row>
      <el-row>
        <el-col :span="6">
           <el-form-item label="门店类型" prop="type" >
              <el-select  v-model="form.type" placeholder="请选择类型" style="width:100%;">
                <el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="Number(item.value)" :disabled="typeOneDisabled" />
              </el-select>
           </el-form-item>
        </el-col>
         <el-col :span="6">
          <el-form-item label="选择店长" prop="managerId"  v-if="form.type!=4">
          <el-select
            v-model="form.managerId"
            style="width: 100%;"
            placeholder="请选择店长"
            filterable
            :filter-method="queryEmployee"
          >
             <el-option v-for="item in employeeOptions" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
          </el-form-item>
         </el-col>
        <el-col :span="6">
          <el-form-item label="联盟店铺"  v-if="form.type==4" prop="partnerShopId">
            <el-select v-model="unionName" @change="unionClick" style="width: 100%;" :filter-method="queryUnion" value-key="id" filterable placeholder="店主手机号">
              <el-option
                v-for="item in unionForm"
                :key="item.id"
                :label="item.name"
                :value="item"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="门头照" prop="doorPhoto">
            <single-upload v-model="form.doorPhoto"
                           style="width: 300px;display: inline-block;margin-left: 10px"></single-upload>
          </el-form-item>
        </el-col>
      </el-row>

<!--      <el-row>-->
<!--        <el-col :span="6">-->
<!--        <el-form-item label="结算方式" >-->
<!--             <el-select v-model="accountMethodarray"  style="width:100%" multiple  placeholder="请选择结算方式" @change="accountMethodchanges">-->
<!--                <el-option  label="不结算" value="0">  </el-option>-->
<!--                <el-option  label="结算货款" value="1">  </el-option>-->
<!--                <el-option  label="配送费用" value="2">  </el-option>-->
<!--                <el-option  label="送货员工资" value="3">  </el-option>-->
<!--             </el-select>-->
<!--        </el-form-item>-->
<!--        </el-col>-->
<!--        <el-col :span="6">-->
<!--          <el-form-item label="绑定会员"  >-->
<!--            <el-select-->
<!--              v-model="form.memberId"-->
<!--              style="width: 100%;"-->
<!--              placeholder="请选择会员"-->
<!--              filterable-->
<!--              :filter-method="queryMember"-->
<!--            >-->
<!--              <el-option v-for="item in memberOptions" :key="item.id" :label="item.name" :value="item.id" />-->
<!--            </el-select>-->
<!--          </el-form-item>-->
<!--        </el-col>-->
<!--    </el-row>-->

    <el-tabs v-model="activeName" >
    <el-tab-pane label="基础资料" name="first">
      <el-row>
         <el-col :span="12">
             <el-form-item label="所在地" prop="areaName">
              <Distpicker :province="district.province" :city="district.city" :area="district.area" @selected="onSelected" />
            </el-form-item>
           </el-col>
     </el-row>
      <el-row>
         <el-col :span="12">
           <el-form-item label="详细地址" prop="address">
          <el-input v-model="form.address" />
      </el-form-item>
           </el-col>
     </el-row>
      <el-row>
         <el-col :span="12">
            <el-form-item label="具体位置" prop="lat">
              <el-button type="primary" round @click="mapShowFn"><i class="el-icon-map-location" /> 定位</el-button>
              <span class="deleted_Row_Headings">({{form.lng}},{{form.lat}})</span>
            </el-form-item>
           </el-col>
     </el-row>
           <el-row>
        <el-col :span="6">
            <el-form-item label="联系电话" >
              <el-input v-model="form.telephone" />
             </el-form-item>
        </el-col>
        <el-col :span="6">
              <el-form-item label="联系人" >
                <el-input v-model="form.linkman" />
               </el-form-item>
         </el-col>
      </el-row>


    </el-tab-pane>
<!--    <el-tab-pane label="打印设置" name="second">-->

<!--    <el-row>-->
<!--         <el-col :span="6">-->
<!--            <el-form-item label="打印机用户">-->
<!--               <el-input v-model="form.printeru" />-->
<!--             </el-form-item>-->
<!--         </el-col>-->
<!--    </el-row>-->
<!--      <el-row>-->
<!--          <el-col :span='6'>-->
<!--             <el-form-item label="打印机密钥">-->
<!--               <el-input v-model="form.printerp" />-->
<!--             </el-form-item>-->
<!--          </el-col>-->
<!--     </el-row>-->
<!--      <el-row>-->
<!--        <el-col :span='6'>-->
<!--          <el-form-item label="自动打印" >-->
<!--            <el-switch-->
<!--              @change="elswitch"-->
<!--              v-model="form.autoPrint"-->
<!--              active-color="#13ce66"-->
<!--              inactive-color="#ff4949" />-->
<!--          </el-form-item>-->
<!--        </el-col>-->
<!--      </el-row>-->
<!--    </el-tab-pane>-->
    </el-tabs>
      <el-form-item  style="margin-top:20px">
        <el-button v-permission="['shop.add']" type="primary" :loading="clicked" @click="saveshop('shopForm')">&nbsp&nbsp完 成&nbsp&nbsp</el-button>
      </el-form-item>
    </el-form>
    <el-dialog
      title="请选择具体位置"
      :visible.sync="mapShow"
      top="5vh"
      width="800px"
      :before-close="handleClose"
    >
      <Map :initcenter="[form.lng, form.lat]" @getMap="getMap" />
      <span slot="footer" class="dialog-footer">
        <el-button @click="mapShow = false">取 消</el-button>
        <el-button type="primary" @click="savelngLat">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>
<style scoped>
  .menu-wrapper{
    margin: 15px;
  }
</style>
<script>
import permission from '@/directive/permission/index.js' // 权限判断指令
import { EventBus } from '@/api/eventBus'
import utils from '../../utils/utils.js'
import OfficeDialog from '@/components/OfficeDialog'
import { save , listByOwnerPhone} from '@/api/shop'
import Distpicker from '@/components/Distpicker/Distpicker'
import Map from '@/components/GaodeMap/index'
import { list as sysEmployeeList } from '@/api/sysEmployee'
import singleUpload from '@/components/Upload/singleUpload'
export default {
  name: 'shop-add',
  directives: { permission },
  filters: {

  },
  components: {
    OfficeDialog,
    Distpicker,
    Map,
    singleUpload
  },
  data() {
    return {
      activeName:"first",
      tempLng: '',
      tempLat: '',
      mapShow: false,
      district: {},
      clicked: false, // 按钮防双击
      topName: '',
      typeOneDisabled: false, // 公司类型是否禁用
      typeTwoDisabled: false, // 部门类型是否禁用
      typeOptions: [
          { value: 0, label: '直营店' },
          { value: 3, label: '加盟店' },
          { value: 4, label: '联盟店' },
      ],
      memberOptions: [],
      employeeOptions: [],
      form: {
        autoPrint:false,
        id: '',
        name: '',
        officeId: '',
        linkman: '',
        telephone: '',
        status: 0,
        type: "",
        modifyDate: '',
        address: '', // 地址
        lng: '', // 经度
        lat: '', // 纬度
        areaName: '',
        printeru: '',
        printerp: '',
        managerId: '',
        partnerShopId:'',
        partnerEnterpriseId:'',
        doorPhoto:''
      },
      unionForm: [],
      unionName:'',
      rules: {
        name: [
          { required: true, message: '请输入门店名称', trigger: 'blur' },
          { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
        ],
        areaName: [
          { required: true, message: '请选择所在地址' }
        ],
        address: [
          { required: true, message: '请选择详细地址' }
        ],
        lat: [
          { required: true, message: '请选择具体坐标' }
        ],
        type: [
          { required: true, message: '请选择类型', trigger: 'blur' }
        ],
        managerId: [
          { required: true, message: '请选择店长', trigger: 'blur' }
        ],
        partnerShopId: [
          { required: true, message: '请选择联盟店', trigger: 'blur' }
        ],
      }
    }
  },
  created() {
    if (!utils.isNull(this.$route.query.rowData.id)) {
      if (this.$route.query.rowData.type == 1) {
        this.typeOneDisabled = true
      }
      this.topName = this.$route.query.rowData.name
      this.form.officeId = this.$route.query.rowData.id
    } else {
      this.typeTwoDisabled = true
    }
    this.queryMember('')
    this.queryEmployee('')
  },
  methods: {
    elswitch(data){
      console.log(data)
      this.form.autoPrint=data

    },
    accountMethodchanges(val){
        this.form.accountMethod=''
        val.forEach(item=>{
          this.form.accountMethod+=item
        })

    },
    queryMember(query) {
      clearTimeout(this.memberMark)
      this.memberMark = setTimeout(() => {
        this.memberOptions = []
        // sysEmployeeList({ employeeType:2,name: query }).then(res => {
        //   this.memberOptions = res.data.data
        // }).catch(err => { console.log(err) })
        memberlist().then(res => {
          this.memberOptions = res.data.data
        }).catch(err => { console.log(err) })
      }, 300)
    },
    queryEmployee(query) {
      clearTimeout(this.employeeMark)
      this.employeeMark = setTimeout(() => {
        this.employeeOptions = []
        sysEmployeeList({ employeeType:0,name: query }).then(res => {
          this.employeeOptions = res.data.data
        }).catch(err => { console.log(err) })
      }, 300)
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {})
    },
    mapShowFn() {
      this.mapShow = !this.mapShow
    },
    getMap(lng, lat,addressData) {
      console.log(lng, lat,addressData)
      // 定义变量保存经纬度
      this.tempLng = lng
      this.tempLat = lat
    },
    savelngLat() {
      this.form.lng = this.tempLng
      this.form.lat = this.tempLat
      this.mapShow = false
    },
    onSelected(val) {
      console.log(val)
      if (!utils.isNull(val.city) && !utils.isNull(val.area) && !utils.isNull(val.area.code)) {
        this.form.areaId = val.area.code
        this.form.areaName = val.province.value + val.city.value + val.area.value
        // this.form.areaName = val.area.value
      }
    },
    dialogShow() {
      console.log('点击了')
      this.$refs.officeDialog.show()
    },
    dialogConfirm(val) {
      this.form.officeId = val.id
      this.topName = val.name
    },
    saveshop(form) {
      const _this = this
      this.$refs[form].validate((valid) => {
        if (valid) { // 校验表单
          _this.clicked = true
          const date = new Date()
          this.form.modifyDate = date
          save(_this.form).then(response => {
            console.log(response)
            _this.clicked = false
            EventBus.$emit('shop-add', response.data)
            _this.$store.dispatch('tagsView/delView', _this.$route).then(({ visitedViews }) => {
              _this.$router.push({
                path: '/shop/list'
              })
            })
            // 关闭当前tab回到列表
          }).catch(error => {
            _this.clicked = false
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
        beforeMount() {
      var _this = this
      window.onresize = () => {
        return (() => {
          if (_this.queryType == true) {
            var h = document.documentElement.clientHeight || document.body.clientHeight
            this.curHeight = h - 311//减去页面上固定高度height
            this.tabsHeight = h - 381
          } else {
            var h = document.documentElement.clientHeight || document.body.clientHeight
            _this.curHeight = h - 224//减去页面上固定高度height
            this.tabsHeight = h - 294
          }
        })()
      }
    },
    comeIn() {
      console.log('222')
      var h = document.documentElement.clientHeight || document.body.clientHeight
      this.curHeight = h - 224//减去页面上固定高度height
      this.tabsHeight = h - 294
    },
    queryUnion(data){
      console.log(data)
      var _this = this
      listByOwnerPhone({ownerPhone:data}).then(res=>{
        console.log(res)
        _this.unionForm = res.data.data
      })
    },
    unionClick(data){
      console.log(data)
      this.unionName = data.name
      this.form.partnerShopId = data.id
      this.form.partnerEnterpriseId = data.enterpriseId
    }
  }
}
</script>
